<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :md="8" :sm="24" >
            <a-form-item label="客户">
              <j-popup
                placeholder="请选择选择客户"
                v-model="queryParam.customer_code"
                code="v_customer_info"
                org-fields="customer_code"
                dest-fields="customer_code"
                :field="getPopupField('customer_code')"
              />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :md="8" :sm="24" >
            <a-form-item label="跟进时间">
              <a-range-picker v-model="queryParam.followup_date" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :md="8" :sm="24">
            <a-form-item label="跟进人">
              <JSelectUserByDep v-model="queryParam.create_by" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button  type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <template v-if="dataSource.length>0">
      <a-spin size="large" :spinning="spinning" >
      <a-timeline>
        <template v-for="(item,i) in dataSource">
          <a-timeline-item :key="i">
            <span slot="dot">
              <a-icon type="phone" v-if="item.communicate_type === '0'" />
              <a-icon type="wechat" v-if="item.communicate_type === '1'" />
              <a-icon type="user" v-if="item.communicate_type === '2'"/>
            </span>
            <h3>{{moment(item.followup_date).format('YYYY-MM-DD')}}</h3>
            <a-card class="timeline-card" :bodyStyle="bodyStyle">
              <a-row type="flex" align="middle">
                <a-col :span="4" class="timeline-card-left">
                  <h2 >{{filterDictTextByCache('communicate_type',item.communicate_type)}}</h2>
                  <p>接触</p>
                </a-col>
                <a-col :span="19" class="timeline-card-right" style="">
                  <a-row type="flex" :gutter="[12,12]" justify="space-between">
                    <a-col span="12">
                      <a-avatar size="small" style="color: #f56a00; backgroundColor: #fde3cf">{{filterDictText(dictOptions.create_by,item.create_by) |createByOne}}</a-avatar>
                      <span class="timeline-card-name">{{filterDictText(dictOptions.create_by,item.create_by)}}</span>
                    </a-col>
                    <a-col span="12">
                      跟进日期:{{moment(item.followup_date).format('YYYY-MM-DD')}}
                    </a-col>
                    <a-col span="24">
                      {{item.remarks}}
                    </a-col>
                    <a-col span="12">客户联系人：{{item.customer_contacts}}</a-col>
                    <a-col span="12">客户意向等级：{{filterDictTextByCache('customer_intention',item.customer_intention)}}</a-col>
                    <a-col span="12">客户: {{item.customer_name}}</a-col>
                    <a-col span="12">计划下次跟进时间: {{moment(item.plan_followup_date).format('YYYY-MM-DD')}}</a-col>
                  </a-row>
                </a-col>
              </a-row>
            </a-card>
          </a-timeline-item>
        </template>
      </a-timeline>
      <a-pagination style="margin-left:15px;" @change="pageChange" v-model="pageNo" :total="total" />
      </a-spin>
    </template>
    <a-empty v-else />
  </a-card>
</template>
<script >
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
import { getAction } from '@/api/manage'
import { filterDictTextByCache, filterDictText } from '@/components/dict/JDictSelectUtil'
import moment from 'moment'
import { mapGetters } from 'vuex'
import { USER_AUTH } from '@/store/mutation-types'
export default {
  name: 'XyParkFollowUp',
  components: {
    JSelectUserByDep
  },
  data() {
    return {
      bodyStyle: {
        padding: '10px 15px'
      },
      pageNo: 1,
      total: 0,
      url: {
        list: '/online/cgform/api/getData/fd4c6471a4b6440baa1626a64b59fe70',
        columns: 'online/cgform/api/getColumns/fd4c6471a4b6440baa1626a64b59fe70'
      },
      dataSource: [],
      queryParam: {},
      spinning: false,
      dictOptions: []
      // isAll: false
    }
  },
  created() {
    this.getColumns()
    // const authList = JSON.parse(sessionStorage.getItem(USER_AUTH) || '[]')
    // authList.forEach(item => {
    //   if (item.action === 'XyParkFollowUp:all') {
    //     this.isAll = true
    //   }
    // })
  },
  mounted() {
    this.loadData()
  },
  filters: {
    createByOne(value) {
      return value ? value.slice(0, 1) : ''
    }
  },
  methods: {
    ...mapGetters(['userInfo']),
    filterDictTextByCache,
    filterDictText,
    moment,
    getColumns() {
      getAction(this.url.columns).then(res => {
        if (res.success) {
          this.dictOptions = res.result.dictOptions
        } else {
          this.$message.error(res.message)
        }
      })
    },
    pageChange(page) {
      this.loadData()
    },
    loadData() {
      this.spinning = true
      const param = this.getQueryParams()
      getAction(this.url.list, param).then(res => {
        if (res.success) {
          this.dataSource = res.result.records
          this.total = res.result.total
        } else {
          this.$message.error(res.message)
        }
        this.spinning = false
      })
    },
    getQueryParams() {
      // 获取查询条件
      var param = Object.assign({}, {
        create_by: this.queryParam.create_by ? this.queryParam.create_by : null,
        followup_date_begin: this.queryParam.followup_date ? this.queryParam.followup_date[0] : null,
        followup_date_end: this.queryParam.followup_date ? this.queryParam.followup_date[1] : null,
        customer_code: this.queryParam.customer_code ? this.queryParam.customer_code : null
      }, { pageNo: this.pageNo, pageSize: 10, column: 'followup_date', order: 'desc' })
      return param
    },
    searchQuery() {
      this.pageNo = 1
      this.loadData()
    },
    searchReset() {
      this.queryParam = {}
      this.pageNo = 1
      this.loadData()
    },
    // 给popup查询使用(查询区域不支持回填多个字段，限制只返回一个字段)
    getPopupField(fields) {
      return fields.split(',')[0]
    }
  }
}
</script>
<style scoped>
.timeline-card{
  box-shadow: #e5e5e5 1px 5px 10px 3px;
  width:70%;
}
.timeline-card-right{
  border-left: 1px solid rgb(229 229 229);
  padding-left: 20px;
}
.timeline-card-name{
  font-size:14px;
  font-weight: 700;
  margin-left:10px;
}
.timeline-card-left>h2,.timeline-card-left>p{
  text-align: center;
}
</style>
